<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>老虎机</title>
    <script type="text/javascript" src="js/jquery-1.7.2-min.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
<div>
    <div class="main_bg">
        <div class="main">
            <!--<div id="res" style="text-align:center;color:#fff;padding-top:15px;"></div>-->
            <div class="num_mask"></div>
            <div class="num_box">
                <div class="num"></div>
                <div class="num"></div>
                <div class="num"></div>
                <div>
                    <button class="tb">
                    投币
                    </button>
                </div>
                <div>
                    <button class="jf">
                        积分
                    </button>
                </div>
                <div class="btn"></div>
            </div>
        </div>
    </div>
</div>

<script>
    function numRand() {
        var x = 999; //上限
        var y = 100; //下限
        var rand = parseInt(Math.random() * (x - y + 1) + y);
        return rand;
    }
    var isBegin = false;
    $(function(){
        var u = 265;
        $('.btn').click(function(){
            if(isBegin) return false;
            isBegin = true;
            $(".num").css('backgroundPositionY',0);
            var result = numRand();
//            $('#res').text('摇奖结果 = '+result);
            var num_arr = (result+'').split('');
            $(".num").each(function(index){
                var _num = $(this);
                setTimeout(function(){
                    _num.animate({
                        backgroundPositionY: (u*60) - (u*num_arr[index])
                    },{
                        duration: 6000+index*3000,
                        easing: "easeInOutCirc",
                        complete: function(){
                            if(index==3) isBegin = false;
                        }
                    });
                }, index * 300);
            });
        });
    });
</script>
</body>
</html>